<template>
  <ele-modal v-bind="modalConfig(visible, updateVisible, save, loading, title)">
    <a-form ref="formRef" :model="form" :rules="rules"
      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }">
      <a-row>
        <a-col :span="12">
          <a-form-item label="编码" name="code">
            <a-input allow-clear v-model:value="form.code" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="名称" name="name">
            <a-input allow-clear v-model:value="form.name" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-form-item label="状态" name="status">
            <a-radio-group v-model:value="form.status" button-style="solid" optionType="button" :options="[
              { value: 1, label: '启用' },
              { value: 2, label: '禁用' }
            ]" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="账套" name="isMaster">
            <a-radio-group v-model:value="form.isMaster" button-style="solid" optionType="button" :options="[
              { value: 'Y', label: '正式' },
              { value: 'N', label: '测试' }
            ]" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="提交" name="isSubmit">
            <a-radio-group v-model:value="form.isSubmit" button-style="solid" optionType="button" :options="[
              { value: 'Y', label: '是' },
              { value: 'N', label: '否' }
            ]" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="审核" name="isAudit">
            <a-radio-group v-model:value="form.isAudit" button-style="solid" optionType="button" :options="[
              { value: 'Y', label: '是' },
              { value: 'N', label: '否' }
            ]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="备注" :label-col="{ md: 2 }" name="remark">
            <a-textarea allow-clear v-model:value="form.remark" />
          </a-form-item>
        </a-col>
      </a-row>

    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import { add, update } from '@/api/application/apiConfig';
import { ApiConfigList } from '@/api/application/apiConfig/model';
import { modalConfig } from '@/utils';
import { computed } from 'vue';

// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);

const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
}>();

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: ApiConfigList | null;
}>();

//
const formRef = ref<FormInstance | null>(null);

// 是否是修改
const isUpdate = ref(false);

const title = computed(() => (isUpdate.value ? '编辑' : '添加'));
// 提交状态
const loading = ref(false);

// 表单数据
const { form, resetFields } = useFormData<ApiConfigList>({
  id: 0,
  code: '',
  name: '',
  status: 1,
  isMaster: 'N',
  isAudit: 'N',
  isSubmit: 'N',
  remark: ""
});

// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
  code: [
    {
      required: true,
      message: '请输入编码',
      type: 'string',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入名称',
      type: 'string',
      trigger: 'blur'
    }
  ]
});

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      const saveOrUpdate = isUpdate.value ? update : add;
      saveOrUpdate(form)
        .then((msg) => {
          loading.value = false;
          message.success(msg);
          updateVisible(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          message.error(e.message);
        });
    })
    .catch(() => { });
};

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit('update:visible', value);
};

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.data) {
        Object.assign(form, props.data);
        isUpdate.value = true;
      } else {
        isUpdate.value = false;
      }
    } else {
      resetFields();
      formRef.value?.clearValidate();
    }
  }
);
</script>
